<template>
  <div class="employee-table">
    <!-- 筛选表单区域 -->
    <div class="search-section">
      <t-form :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
        <t-row :gutter="[24, 24]">
          <t-col :span="6">
            <t-form-item label="用户名" name="username">
              <t-input
                v-model="formData.username"
                class="form-item-content"
                type="search"
                placeholder="请输入用户名进行搜索"
                :style="{ minWidth: '200px' }"
                clearable
              >
                <template #suffix-icon>
                  <t-icon name="search" />
                </template>
              </t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item label="角色" name="role">
              <t-select v-model="formData.role" class="form-item-content" placeholder="请选择角色" clearable>
                <t-option
                  v-for="option in roleOptions"
                  :key="option.label"
                  :value="option.value"
                  :label="option.label"
                />
              </t-select>
            </t-form-item>
          </t-col>
          <t-col :span="12" class="operation-container">
            <t-space>
              <t-button theme="primary" type="submit" shape="round">
                <template #icon>
                  <t-icon name="search" />
                </template>
                查询
              </t-button>
              <t-button type="reset" variant="base" theme="default" shape="round">
                <template #icon>
                  <t-icon name="refresh" />
                </template>
                重置
              </t-button>
            </t-space>
          </t-col>
        </t-row>
      </t-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <div class="action-btn-group">
        <t-space>
          <t-button theme="primary" @click="handleExport" shape="round">
            <template #icon>
              <t-icon name="download" />
            </template>
            导出
          </t-button>
        </t-space>
      </div>
      <!-- 统计信息 -->
      <div class="stats-info">
        <t-tag theme="primary" variant="light"> 共 {{ pagination.total }} 条记录 </t-tag>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-container">
      <t-table
        :data="data"
        :columns="COLUMNS"
        :row-key="rowKey"
        :vertical-align="verticalAlign"
        :hover="hover"
        :pagination="pagination"
        :loading="dataLoading"
        :bordered="false"
        :stripe="true"
        row-hover-divider
        @page-change="rehandlePageChange"
        @change="rehandleChange"
      >
        <!-- 头像列 -->
        <template #avatar="{ row }">
          <div class="avatar-cell">
            <t-avatar :image="row.avatarUrl || defaultAvatar" size="large" class="user-avatar" />
          </div>
        </template>

        <!-- 用户名列 -->
        <template #username="{ row }">
          <div class="username-cell">
            <t-tooltip :content="row.username" placement="top">
              <div class="username-content">
                <span class="username-text ellipsis">{{ row.username }}</span>
              </div>
            </t-tooltip>
          </div>
        </template>

        <!-- 账号列 -->
        <template #account="{ row }">
          <div class="account-cell">
            <span class="account-text">{{ row.account }}</span>
          </div>
        </template>

        <!-- 角色列 -->
        <template #role="{ row }">
          <div class="role-cell">
            <!-- 根据角色数组显示标签 -->
            <t-space>
              <!-- 超级管理员标签 - 如果是超级管理员只显示超级管理员标签 -->
              <t-tag
                v-if="row.role.includes(ROLES.SUPER_ADMIN)"
                :theme="ROLE_THEMES[ROLES.SUPER_ADMIN]"
                variant="light"
                class="role-tag"
              >
                {{ ROLE_NAMES[ROLES.SUPER_ADMIN] }}
              </t-tag>
              <!-- 非超级管理员的其他角色标签 -->
              <template v-else>
                <!-- 康复对象标签 -->
                <t-tag
                  v-if="row.role.includes(ROLES.PATIENT) && !row.role.includes(ROLES.DOCTOR)"
                  :theme="ROLE_THEMES[ROLES.PATIENT]"
                  variant="light"
                  class="role-tag"
                >
                  {{ ROLE_NAMES[ROLES.PATIENT] }}
                </t-tag>
                <!-- 康复师标签 -->
                <t-tag
                  v-if="row.role.includes(ROLES.DOCTOR)"
                  :theme="ROLE_THEMES[ROLES.DOCTOR]"
                  variant="light"
                  class="role-tag"
                >
                  {{ ROLE_NAMES[ROLES.DOCTOR] }}
                </t-tag>
                <!-- 管理员标签 -->
                <t-tag
                  v-if="row.role.includes(ROLES.ADMIN)"
                  :theme="ROLE_THEMES[ROLES.ADMIN]"
                  variant="light"
                  class="role-tag"
                >
                  {{ ROLE_NAMES[ROLES.ADMIN] }}
                </t-tag>
              </template>
            </t-space>
          </div>
        </template>

        <!-- 账号状态列 -->
        <template #status="{ row }">
          <div class="status-cell">
            <t-tag :theme="row.status === 0 ? 'success' : 'danger'" variant="light" class="status-tag">
              {{ row.status === 0 ? '正常' : '禁用' }}
            </t-tag>
          </div>
        </template>

        <!-- 最后修改时间列 -->
        <template #updateTime="{ row }">
          <div class="time-cell">
            <t-icon name="time" class="time-icon" />
            <span class="time-text">{{ formatDateTime(row.updateTime) }}</span>
          </div>
        </template>

        <!-- 操作列 -->
        <template #op="slotProps">
          <div class="operation-cell">
            <t-space size="small">
              <t-button
                size="small"
                theme="primary"
                variant="text"
                :disabled="!canOperateUser(slotProps.row.role)"
                @click="handleEdit(slotProps.row)"
              >
                <template #icon>
                  <t-icon name="edit" />
                </template>
                编辑
              </t-button>
              <t-button
                size="small"
                :theme="slotProps.row.status === 0 ? 'danger' : 'success'"
                variant="text"
                :disabled="!canOperateUser(slotProps.row.role)"
                @click="handleToggleStatus(slotProps.row)"
              >
                <template #icon>
                  <t-icon :name="slotProps.row.status === 0 ? 'close-circle' : 'check-circle'" />
                </template>
                {{ slotProps.row.status === 0 ? '禁用' : '启用' }}
              </t-button>
              <!-- 管理员按钮 -->
              <t-button
                size="small"
                :theme="getAdminButtonTheme(slotProps.row)"
                variant="text"
                :disabled="!canOperateUser(slotProps.row.role)"
                v-if="
                  ((slotProps.row.role.includes(ROLES.DOCTOR) && !slotProps.row.role.includes(ROLES.ADMIN)) ||
                    slotProps.row.role.includes(ROLES.ADMIN)) &&
                  Array.isArray(userStore.userInfo.role) &&
                  userStore.userInfo.role.includes(ROLES.SUPER_ADMIN)
                "
                @click="handleManageAdmin(slotProps.row)"
              >
                <template #icon>
                  <t-icon :name="getAdminButtonIcon(slotProps.row)" />
                </template>
                <template v-if="slotProps.row.role.includes(ROLES.DOCTOR) && !slotProps.row.role.includes(ROLES.ADMIN)">
                  添加管理员
                </template>
                <!-- 当该角色是管理员时，显示撤销管理员 -->
                <template v-if="slotProps.row.role.includes(ROLES.ADMIN)"> 撤销管理员 </template>
              </t-button>
            </t-space>
          </div>
        </template>
      </t-table>
    </div>
    <!-- 全屏导出加载覆盖层：导出时显示，完成后关闭 -->
    <t-loading :loading="exporting" text="正在导出数据..."></t-loading>
  </div>
</template>

<script setup lang="ts">
import { enableOrDisableEmployee, exportEmployee, getEmployeeList, updateEmployeeRole } from '@/api/employee';
import type { EmployeeRequest } from '@/api/model/employeeModel';
import { DEFAULT_PAGINATION, ROLES } from '@/constants';
import { useUserStore } from '@/store';
import { formatDateTime } from '@/utils/date';
import { getRoleLevel } from '@/utils/roleLevel';
import type { PageInfo, PrimaryTableCol } from 'tdesign-vue-next';
import { DialogPlugin, MessagePlugin, NotifyPlugin } from 'tdesign-vue-next';
import { onActivated, ref } from 'vue';
import { useRouter } from 'vue-router';
defineOptions({ name: 'EmployeeIndex' });

// 路由相关
const router = useRouter();

// 表单数据接口
interface FormData {
  username?: string;
  role?: string; // 用于搜索的角色标识
}

// 表格列配置
const COLUMNS: PrimaryTableCol[] = [
  {
    title: '头像',
    colKey: 'avatar',
    width: 80,
    align: 'center',
  },
  {
    title: '用户名',
    colKey: 'username',
    width: 150,
    ellipsis: true,
    align: 'center',
  },
  {
    title: '账号',
    colKey: 'account',
    width: 150,
    align: 'center',
  },
  {
    title: '角色',
    colKey: 'role',
    width: 120,
    align: 'center',
  },
  {
    title: '账号状态',
    colKey: 'status',
    width: 120,
    align: 'center',
  },
  {
    title: '最后修改时间',
    colKey: 'updateTime',
    width: 180,
    align: 'center',
  },
  {
    align: 'center',
    fixed: 'right',
    width: 200,
    colKey: 'op',
    title: '操作',
  },
];

// 初始化表单数据
const searchForm: FormData = {
  username: '',
  role: undefined,
};

const formData = ref<FormData>({ ...searchForm });
const rowKey = 'id';
const verticalAlign = 'top' as const;
const hover = true;

// 分页配置
const pagination = ref({ ...DEFAULT_PAGINATION });

// 后端返回的总人员页数
const pageCnt = ref(1);

// 数据相关
const data = ref<any[]>([]);
const dataLoading = ref(false);
// 中文注释：导出过程中的全屏加载状态
const exporting = ref(false);

// 默认头像
const defaultAvatar = 'https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2279408239,3825398873&fm=253&gp=0.jpg';

// 用户信息
const userStore = useUserStore();

/**
 * 检查当前用户是否可以操作目标用户
 * @param targetUserRoles 目标用户的角色数组
 * @returns 是否可以操作
 */
const canOperateUser = (targetUserRoles: string[]): boolean => {
  const currentUserRoles = userStore.userInfo.role;

  // 如果当前用户角色不是数组，无法操作
  if (!Array.isArray(currentUserRoles)) {
    return false;
  }

  // 获取当前用户和目标用户的角色等级
  const currentUserLevel = getRoleLevel(currentUserRoles);
  const targetUserLevel = getRoleLevel(targetUserRoles);

  // 只有当前用户等级高于目标用户等级时才能操作
  return currentUserLevel > targetUserLevel;
};

// 角色名称映射
const ROLE_NAMES = {
  [ROLES.PATIENT]: '康复对象',
  [ROLES.DOCTOR]: '康复师',
  [ROLES.ADMIN]: '管理员',
  [ROLES.SUPER_ADMIN]: '超级管理员',
};

// 角色主题映射
const ROLE_THEMES: Record<string, 'default' | 'success' | 'primary' | 'warning' | 'danger'> = {
  [ROLES.PATIENT]: 'success',
  [ROLES.DOCTOR]: 'primary',
  [ROLES.ADMIN]: 'warning',
  [ROLES.SUPER_ADMIN]: 'danger',
};

// 角色选择映射
const roleOptions = [
  { value: 'PATIENT', label: ROLE_NAMES[ROLES.PATIENT] },
  { value: 'DOCTOR', label: ROLE_NAMES[ROLES.DOCTOR] },
  { value: 'ADMIN', label: ROLE_NAMES[ROLES.ADMIN] },
  { value: 'SUPER_ADMIN', label: ROLE_NAMES[ROLES.SUPER_ADMIN] },
];

/**
 * 获取员工列表数据
 */
const fetchData = async () => {
  dataLoading.value = true;
  try {
    console.log('fetchData', formData.value);

    // 构建请求参数
    let roleArray: string[] | undefined;
    if (formData.value.role) {
      // 根据选择的角色标识转换为对应的角色数组
      switch (formData.value.role) {
        case 'PATIENT':
          roleArray = [ROLES.PATIENT];
          break;
        case 'DOCTOR':
          roleArray = [ROLES.PATIENT, ROLES.DOCTOR];
          break;
        case 'ADMIN':
          roleArray = [ROLES.PATIENT, ROLES.DOCTOR, ROLES.ADMIN];
          break;
        case 'SUPER_ADMIN':
          roleArray = [ROLES.PATIENT, ROLES.DOCTOR, ROLES.ADMIN, ROLES.SUPER_ADMIN];
          break;
        default:
          roleArray = undefined;
      }
    }

    const params: EmployeeRequest = {
      username: formData.value.username || undefined,
      role: roleArray,
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
    };

    console.log('params', params);
    const res = await getEmployeeList(params);
    console.log('res', res);

    const responseData = res.data.data;
    const records = responseData?.records ?? [];
    const total = responseData?.total ?? 0;
    pageCnt.value = responseData?.pages ?? 1;

    data.value = records;
    pagination.value.total = total;
  } catch (e) {
    console.error('获取员工列表失败:', e);
    MessagePlugin.error('获取员工列表失败');
  } finally {
    dataLoading.value = false;
  }
};

/**
 * 导出员工信息
 */
const handleExport = async () => {
  // 中文注释：打开全屏加载覆盖层
  exporting.value = true;
  try {
    // 中文注释：调用导出API，传递当前筛选条件
    const response = await exportEmployee(pageCnt.value, pagination.value.pageSize);

    console.log('response', response);
    // 中文注释：创建下载链接并触发下载
    const blob = new Blob([response], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `员工列表.xlsx`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);

    // 中文注释：提示导出成功
    NotifyPlugin.success({ title: '导出成功', content: '员工列表已下载完成' });
  } catch (error) {
    console.error('导出失败:', error);
    // 中文注释：提示导出失败
    NotifyPlugin.error({ title: '导出失败', content: '请稍后重试' });
  } finally {
    // 中文注释：关闭全屏加载覆盖层
    exporting.value = false;
  }
};

/**
 * 表单重置
 */
const onReset = () => {
  formData.value = { ...searchForm };
  fetchData();
};

/**
 * 表单提交
 */
const onSubmit = () => {
  pagination.value.current = 1;
  fetchData();
};

/**
 * 分页变化处理
 */
const rehandlePageChange = (pageInfo: PageInfo) => {
  pagination.value.current = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  fetchData();
};

/**
 * 表格变化处理
 */
const rehandleChange = (changeParams: unknown, triggerAndData: unknown) => {
  console.log('表格变化:', changeParams, triggerAndData);
};

/**
 * 编辑用户信息
 */
const handleEdit = (row: any) => {
  // 检查权限
  if (!canOperateUser(row.role)) {
    MessagePlugin.warning('您没有权限操作该用户');
    return;
  }

  // 跳转到编辑页面，传递员工ID作为参数
  router.push(`/employee/edit/${row.id}`);
};

/**
 * 切换用户状态（启用/禁用）
 */
const handleToggleStatus = (row: any) => {
  // 检查权限
  if (!canOperateUser(row.role)) {
    MessagePlugin.warning('您没有权限操作该用户');
    return;
  }

  const action = row.status === 0 ? '禁用' : '启用';
  const confirmMessage = `确定要${action}该账号吗？`;

  // 使用 DialogPlugin 的确认对话框
  const dialogInstance = DialogPlugin.confirm({
    header: '提示',
    body: confirmMessage,
    onConfirm: async () => {
      try {
        await enableOrDisableEmployee({
          id: row.id,
          avatarUrl: row.avatarUrl || '',
          username: row.username,
          status: row.status === 1 ? 0 : 1, // 切换状态
          // 最后一个权限角色
          role: row.role[row.role.length - 1] || ['PATIENT'],
        });
        MessagePlugin.success(`${action}成功`);
        fetchData(); // 刷新列表
        dialogInstance.destroy(); // 关闭弹窗
      } catch (e: any) {
        MessagePlugin.error(e.message || `${action}失败`);
      }
    },
  });
};

/**
 * 处理管理管理员操作
 * @param row 行数据
 */
const handleManageAdmin = (row: any) => {
  const currentUserRole = userStore.userInfo.role;
  const targetUserRoles = row.role;

  // 检查当前用户是否为超级管理员
  if (!Array.isArray(currentUserRole) || !currentUserRole.includes(ROLES.SUPER_ADMIN)) {
    MessagePlugin.warning('只有超级管理员才能进行管理员角色管理操作');
    return;
  }

  let newRole: string = ROLES.ADMIN;
  let confirmMessage: string;
  let isAddAdmin: boolean;

  // 根据目标用户角色确定管理操作
  if (targetUserRoles.includes(ROLES.DOCTOR) && !targetUserRoles.includes(ROLES.ADMIN)) {
    // 康复师 -> 添加管理员角色
    isAddAdmin = true;
    confirmMessage = `确定要给 ${row.username} 添加管理员角色吗？（将同时拥有康复师和管理员权限）`;
  } else if (targetUserRoles.includes(ROLES.ADMIN)) {
    // 管理员 -> 撤回管理员角色
    isAddAdmin = false;
    confirmMessage = `确定要撤回 ${row.username} 的管理员角色吗？（将只保留康复师权限）`;
  } else {
    MessagePlugin.warning('该用户无法进行管理操作');
    return;
  }

  // 使用 DialogPlugin 的确认对话框
  const dialogInstance = DialogPlugin.confirm({
    header: '管理确认',
    body: confirmMessage,
    onConfirm: async () => {
      try {
        await updateEmployeeRole({
          id: row.id,
          username: row.username,
          role: newRole,
          avatarUrl: row.avatarUrl,
          status: row.status,
          isAddAdmin: isAddAdmin,
        });

        MessagePlugin.success('管理成功');
        // 重新获取列表
        fetchData();
        dialogInstance.destroy(); // 关闭弹窗
      } catch (e: any) {
        MessagePlugin.error(e.message + '无法管理' || '管理失败');
      }
    },
  });
};

// 列表页激活时获取数据
onActivated(() => {
  console.log('onActivated');
  onReset();
});

/**
 * 根据用户角色获取管理员按钮的主题
 * @param row 行数据
 * @returns 按钮主题
 */
const getAdminButtonTheme = (row: any) => {
  if (row.role.includes(ROLES.DOCTOR) && !row.role.includes(ROLES.ADMIN)) {
    return 'warning'; // 中文注释：添加管理员时使用橙色主题
  } else if (row.role.includes(ROLES.ADMIN)) {
    return 'danger'; // 中文注释：撤回管理员时使用红色主题
  }
  return 'default';
};

/**
 * 根据用户角色获取管理员按钮的图标
 * @param row 行数据
 * @returns 图标名称
 */
const getAdminButtonIcon = (row: any) => {
  if (row.role.includes(ROLES.DOCTOR) && !row.role.includes(ROLES.ADMIN)) {
    return 'user-add';
  } else {
    return 'user-clear';
  }
};
</script>

<style lang="less" scoped>
.employee-table {
  /* 中文注释：主容器背景色、圆角、阴影全部用变量 */
  background-color: var(--td-bg-color-container);
  border-radius: var(--td-radius-large);
  box-shadow: var(--td-shadow-1);
  /* 删除未定义的动画 */

  // 搜索区域样式
  .search-section {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    /* 中文注释：渐变背景用变量，深色模式下会自动适配 */
    background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
    border-bottom: 1px solid var(--td-border-level-1-color);
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      /* 中文注释：顶部渐变条用主题变量 */
      background: linear-gradient(90deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
    }
  }

  // 操作按钮区域样式
  .action-section {
    padding: var(--td-comp-paddingTB-lg) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--td-bg-color-container);
    border-bottom: 1px solid var(--td-border-level-1-color);
    gap: 16px;
    .action-btn-group {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: 32px !important;
      .t-button {
        min-width: 120px;
        height: 40px;
        font-size: 16px;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        box-sizing: border-box;
        padding: 0 20px;
        .t-icon {
          font-size: 20px;
          margin-right: 6px;
        }
      }
    }

    // 统计信息样式
    .stats-info {
      margin-left: auto;
      display: flex;
      align-items: center;

      .t-tag {
        font-weight: 500;
        padding: 8px 16px;
        border-radius: var(--td-radius-medium);
        /* 中文注释：Tag背景、边框、文字全部用变量 */
        background: linear-gradient(135deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
        border: 1px solid var(--td-brand-color-1);
        color: var(--td-brand-color);
      }
    }
  }

  // 表格容器样式
  .table-container {
    padding: 0 var(--td-comp-paddingLR-xl) var(--td-comp-paddingTB-xl);
    background-color: var(--td-bg-color-container);
    :deep(.t-table) {
      border-radius: var(--td-radius-medium);
      box-shadow: var(--td-shadow-1);
      border: 1px solid var(--td-border-level-1-color);
      .t-table__header {
        background: linear-gradient(
          135deg,
          var(--td-bg-color-secondarycontainer) 0%,
          var(--td-bg-color-container) 100%
        );
        border-bottom: 2px solid var(--td-border-level-1-color);
        th {
          font-weight: 600;
          color: var(--td-text-color-primary);
          padding: 14px 12px;
          text-align: center;
          vertical-align: middle;
        }
      }
      .t-table__body {
        tr {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          &:hover {
            background: linear-gradient(135deg, var(--td-bg-color-container-hover) 0%, var(--td-brand-color-1) 100%);
            transform: translateY(-2px);
            box-shadow: var(--td-shadow-2);
            z-index: 1;
          }
          td {
            padding: 14px 12px;
            border-bottom: 1px solid var(--td-border-level-1-color);
            text-align: center;
            vertical-align: middle;
            height: 48px;
          }
          &:last-child td {
            border-bottom: none;
          }
        }
      }
    }
  }
}

// 表单样式优化
.form-item-content {
  width: 100%;
  :deep(.t-input),
  :deep(.t-select) {
    border-radius: var(--td-radius-medium);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--td-border-level-1-color);
    &:hover {
      border-color: var(--td-brand-color-1);
      box-shadow: 0 0 0 3px var(--td-brand-color-2, rgba(0, 82, 204, 0.08));
    }
    &:focus-within {
      border-color: var(--td-brand-color);
      box-shadow: 0 0 0 4px var(--td-brand-color-2, rgba(0, 82, 204, 0.12));
      transform: translateY(-1px);
    }
    .t-input__suffix {
      color: var(--td-brand-color);
    }
  }
}

.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

// 表格单元格样式
.avatar-cell,
.username-cell,
.account-cell,
.role-cell,
.status-cell,
.time-cell,
.operation-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 36px;
}

.avatar-cell {
  .user-avatar {
    border: 2px solid var(--td-border-level-1-color);
    transition: all 0.3s ease;
    &:hover {
      border-color: var(--td-brand-color);
      transform: scale(1);
    }
  }
}

.username-cell .username-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  .username-text {
    font-weight: 500;
    color: var(--td-text-color-primary);
    line-height: 1.4;
  }
}

.account-cell {
  .account-text {
    font-weight: 500;
    color: var(--td-text-color-primary);
  }
}

// 角色单元格样式
.role-cell {
  .role-tag {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--td-radius-medium);
    font-size: 13px;
    min-width: 60px;
    text-align: center;
  }
}

// 状态单元格样式
.status-cell {
  .status-tag {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--td-radius-medium);
    font-size: 13px;
    min-width: 60px;
    text-align: center;
  }
}

.time-cell {
  gap: 6px;
  .time-icon {
    color: var(--td-text-color-placeholder);
    font-size: 14px;
  }
  .time-text {
    color: var(--td-text-color-secondary);
    font-size: 13px;
  }
}

/* 中文注释：操作列样式优化 */
.operation-cell {
  .t-space {
    gap: 12px; /* 中文注释：增加按钮之间的间距 */
  }

  /* 中文注释：去掉按钮之间的分割线并优化样式 */
  .t-button {
    border: none;
    background: transparent;
    border-radius: var(--td-radius-small);
    transition: all 0.2s ease;
    min-width: 60px; /* 中文注释：增加按钮最小宽度，确保图标和文字有足够空间 */
    height: 28px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0px; /* 中文注释：增加按钮之间的间距 */
    padding: 0 0px; /* 中文注释：增加按钮内边距，确保文字和图标有足够空间 */

    &:hover {
      background-color: var(--td-bg-color-container-hover);
      transform: translateY(-1px);
    }

    /* 中文注释：图标样式优化 */
    .t-icon {
      font-size: 14px;
    }

    /* 中文注释：授权按钮禁用状态样式 */
    &.t-is-disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background-color: var(--td-bg-color-component-disabled);
      color: var(--td-text-color-disabled);
      border-color: var(--td-border-level-1-color);

      &:hover {
        background-color: var(--td-bg-color-component-disabled);
        color: var(--td-text-color-disabled);
        border-color: var(--td-border-level-1-color);
      }
    }
  }

  /* 中文注释：管理员按钮特殊样式 */
  .t-button[theme='danger'] {
    position: relative;
    font-weight: 600;
    color: var(--td-error-color);

    &:hover {
      background: linear-gradient(135deg, var(--td-error-color-1) 0%, var(--td-error-color-2) 100%);
      color: var(--td-error-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
    }

    .t-icon {
      color: var(--td-error-color);
      font-size: 16px;
    }

    /* 中文注释：添加特殊标识 */
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 6px;
      height: 6px;
      background: var(--td-error-color);
      border-radius: 50%;
      opacity: 0.8;
    }
  }

  /* 中文注释：添加管理员按钮样式（橙色） */
  .t-button[theme='warning'] {
    position: relative;
    font-weight: 600;
    color: var(--td-warning-color);

    &:hover {
      background: linear-gradient(135deg, var(--td-warning-color-1) 0%, var(--td-warning-color-2) 100%);
      color: var(--td-warning-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }

    .t-icon {
      color: var(--td-warning-color);
      font-size: 16px;
    }

    /* 中文注释：添加特殊标识 */
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 6px;
      height: 6px;
      background: var(--td-warning-color);
      border-radius: 50%;
      opacity: 0.8;
    }
  }
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

// 分页样式优化
:deep(.t-pagination) {
  margin-top: var(--td-comp-margin-xl);
  padding: var(--td-comp-paddingTB-lg) 0;
  border-top: 1px solid var(--td-border-level-1-color);
  background: linear-gradient(135deg, var(--td-bg-color-secondarycontainer) 0%, var(--td-bg-color-container) 100%);
  border-radius: 0 0 var(--td-radius-medium) var(--td-radius-medium);
  .t-pagination__total {
    color: var(--td-text-color-secondary);
    font-weight: 600;
  }
  .t-pagination__jumper {
    .t-input {
      border-radius: var(--td-radius-small);
      transition: all 0.2s ease;
      &:hover {
        border-color: var(--td-brand-color-1);
      }
      &:focus-within {
        border-color: var(--td-brand-color);
        box-shadow: 0 0 0 2px var(--td-brand-color-2, rgba(0, 82, 204, 0.1));
      }
    }
  }
  .t-pagination__btn {
    transition: all 0.2s ease;
    border-radius: var(--td-radius-small);
    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--td-shadow-1);
    }
    &.t-is-current {
      background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-1) 100%);
      color: white;
      box-shadow: var(--td-shadow-2);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .employee-table {
    .search-section {
      padding: var(--td-comp-paddingTB-lg) var(--td-comp-paddingLR-lg);
    }
    .table-container {
      padding: 0 var(--td-comp-paddingLR-lg) var(--td-comp-paddingTB-lg);
    }
  }
}

/* 中文注释：深色模式下的特殊优化 */
:root[theme-mode='dark'] {
  .employee-table {
    /* 中文注释：主容器阴影更深 */
    box-shadow: var(--td-shadow-2);
    .search-section {
      /* 中文注释：深色模式下渐变更暗 */
      background: linear-gradient(135deg, var(--td-brand-color-2) 0%, var(--td-brand-color-3) 100%);
      &::before {
        background: linear-gradient(90deg, var(--td-brand-color-1) 0%, var(--td-brand-color-2) 100%);
      }
    }
    .table-container {
      :deep(.t-table) {
        box-shadow: var(--td-shadow-2);
        .t-table__body tr:hover {
          background: linear-gradient(135deg, var(--td-bg-color-container-hover) 0%, var(--td-brand-color-2) 100%);
          box-shadow: var(--td-shadow-3);
        }
      }
    }
  }
}
</style>
